<template>
	<view class="suggest">
		<u--form labelPosition="left" :model="settingForm" :rules="rules" ref="uForm" labelWidth="140">
			<uni-card margin="17rpx 18rpx" spacing="0px" padding="10px">
				<u-form-item labelWidth="0" prop="content" :border="false" ref="item1">
					<u--textarea
						v-model="settingForm.content"
						placeholder="请输入你遇到得问题和建议,以便我们提供更好的服务"
						maxlength="200"
						height="200"
						:count="computedCount"
					></u--textarea>
				</u-form-item>
			</uni-card>
			<uni-card margin="17rpx 18rpx" spacing="0px" padding="10px">
				<view class="reason">
					<view class="reasonTitle">添加图片</view>
					<view class="reasonContents enterpriseQualificationContent">
						<u-form-item labelWidth="0" prop="enterpriseQualification" :border="false" ref="item1">
							<u-upload :fileList="fileList5" @afterRead="afterRead" @delete="deletePic" name="5" multiple :maxCount="4" :width="203" :height="203"></u-upload>
						</u-form-item>
					</view>
				</view>
			</uni-card>
		</u--form>
		<view class="submitButton" @click="submit">
			<view>提交</view>
		</view>
		<view style="height: 40rpx"></view>
	</view>
</template>
<script>
import { addFeedback } from '@/api/suggest/index.js';
import upload from '@/utils/upload';
export default {
	computed: {
		computedCount() {
			return this.settingForm.content ? this.settingForm.content.length : 0;
		}
	},
	data() {
		return {
			rules: {
				content: [
					{
						required: true,
						message: '意见反馈不能为空',
						trigger: ['blur', 'change']
					}
				]
			},
			settingForm: {
				content: '',
				feedbackType: '1'
			},
			fileList5: []
		};
	},
	onLoad() {},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		submit() {
			let enterpriseQualificationList = [];
			if (this.fileList5.length) {
				this.fileList5.forEach((item) => {
					enterpriseQualificationList.push(item.url);
				});
			}
			this.settingForm.imageUrls = enterpriseQualificationList.join(',');
			this.$refs.uForm
				.validate()
				.then((res) => {
					addFeedback(this.settingForm).then((res) => {
						uni.$u.toast('提交成功');
						setTimeout((item) => {
							uni.navigateBack();
						}, 2000);
					});
				})
				.catch((errors) => {
					uni.$u.toast('请填写意见反馈');
				});
		},
		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1);
		},
		// 新增图片
		async afterRead(event) {
			this.upLoadFile(event, this[`fileList${event.name}`]);
		}
	}
};
</script>

<style scoped lang="scss">
page {
	background: #fafafa;
}
::v-deep .u-form-item__body__right__message {
	margin-left: 0 !important;
}
::v-deep .uni-card--border {
	border: 1px solid #e5e5e5 !important;
	border-radius: 5rpx !important;
}

::v-deep .uni-card--shadow {
	box-shadow: none !important;
}
::v-deep .u-upload__deletable {
	width: 50rpx !important;
	height: 50rpx !important;
}
::v-deep .uicon-close {
	font-size: 28rpx !important;
	line-height: 28rpx !important;
}
::v-deep .uicon-camera-fill {
	font-size: 40rpx !important;
	line-height: 40rpx !important;
}
::v-deep .u-upload__button,
::v-deep.u-upload__wrap__preview__image,
::v-deep.u-upload__status,
::v-deep.u-upload__wrap__preview,
::v-deep.u-upload__wrap__preview__image {
	width: 200rpx !important;
	height: 200rpx !important;
}
::v-deep .u-upload__wrap__preview__image {
	width: 200rpx !important;
	height: 200rpx !important;
}
::v-deep .u-upload__wrap__preview {
	width: 200rpx !important;
	height: 200rpx !important;
}
.suggest {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.reason {
	padding: 17rpx 18rpx;
	border: 1px solid #e5e5e5;

	.reasonTitle {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 30rpx;
		color: #000000;
		padding-bottom: 20rpx;
		padding-left: 20rpx;
	}

	.reasonContent {
		border: 1px solid #e5e5e5;
		width: 632rpx !important;
		margin: 0 auto 15rpx;

		::v-deep .u-textarea--disabled {
			background-color: #fff !important;
		}

		::v-deep .u-textarea {
			width: 628rpx !important;
			min-height: 225rpx !important;
		}

		::v-deep .u-textarea__field {
			width: 628rpx !important;
			min-height: 225rpx !important;
		}
	}

	.enterpriseQualificationContent {
		border: none;
	}
}

.reasonTitle {
	font-family: Microsoft YaHei;
	font-weight: 400;
	font-size: 30rpx;
	color: #000000;
}
</style>
